<template>
	<view class="mine-wrap">
		<view class="top">
			<!-- #ifdef APP-PLUS -->  
			<view class="status_bar">  
				<view class="top_view"></view>  
			</view>  
			<!-- #endif -->  
			<view class="flex flex-h flex-hsb flex-vc">
				<image :src="basic.uAvatar" mode="aspectFit" class="avatar"></image>
				<view class="flex-1 your-info">
					<view class="your-nickname">{{basic.uNickname}}</view>
					<view class="your-id">ID: {{basic.uIDName}}</view>
					<view class="your-article">文章 {{basic.articleNum}}</view>
				</view>
				<view class="iconfont icon-right"></view>
			</view>			
		</view>
		
		<!-- 我的关注 - 粉丝 - 喜欢 -->
		<view class="flex flex-h flex-hsb your-others">
			<view class="flex-1">
				<view class="nums">{{basic.follow}}</view>
				<view class="title">关注</view>
			</view>
			
			<view class="flex-1">
				<view class="nums">{{basic.fans}}</view>
				<view class="title">粉丝</view>
			</view>
			
			<view class="flex-1">
				<view class="nums">{{basic.like}}</view>
				<view class="title">喜欢</view>
			</view>
		</view>
		
		<!-- 消息 -->
		<view class="msg-box">
			<view class="title">消息</view>
			<view class="flex flex-h">
				<view class="flex-1 item" v-for="item in msg" :key="item.id">
					<view class="iconfont" :class="item.iconName" :style="{backgroundColor: item.bgColor}"></view>
					<view class="item-title">{{item.title}}</view>
				</view>
			</view>
		</view>
		
		<!-- 其他栏目 -->
		<view class="other-box">
			<view class="flex flex-h item" v-for="item in other" :key="item.id">
				<view class="iconfont" :class="item.iconName"></view>
				<view class="flex-1 flex flex-h flex-hsb item-right">
					<view class="title">{{item.title}}</view>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import data from '../../../static/data/mine.js';
	export default {
		data() {
			return {
				basic: data.basic,
				msg: data.msg,
				other: data.other
			};
		},
		mounted(){
			console.log(this.basic);
		}
	}
</script>

<style lang="scss">
.mine-wrap{
	background-color: #f4f6f5;
	.top{
		padding: 50upx 35upx 20upx 35upx;
		background: -webkit-linear-gradient(top, #F6EDF0 0%, #FDFDFD 100%);
		background: linear-gradient(to bottom, #F6EDF0 0%, #FDFDFD 100%);
		.avatar{
			margin-right: 35upx;
			width: 160upx;
			height: 160upx;
			-webkit-border-radius: 50%;
			border-radius: 50%;
		}
		.your-info{
			font-size: 28upx;
			color: #9b9b9b;
			view{ margin: 20upx;}
			.your-nickname{
				font-size: 38upx;
				color: #333;
			}
		}
		.icon-right{
			width: 50upx;
			height: 50upx;
			line-height: 50upx;
			font-size: 50upx;
			color: #ccc;
			text-align: center;
		}
	}
	// 关注 - 粉丝 - 喜欢
	.your-others{
		padding: 20upx 0;
		line-height: 30upx;
		background-color: #fff;
		text-align: center;
		.nums, .title{ margin-top: 10upx;}
		.nums{ font-size: 32upx; font-weight: bold;}
		.title{ font-size: 24upx; color: #ccc;}
	}
	// 消息图标栏
	.msg-box{
		margin-top: 10px;
		background-color: #fff;
		.title{
			height: 80upx;
			line-height: 80upx;
			font-size: 32upx;
			text-indent: 35upx;
			border-bottom: solid 1px #f8f8f8;
		}
		.item{
			padding-bottom: 20upx;
			text-align: center;
			.item-title{ font-size: 22upx;}
			.iconfont{
				margin: 20upx auto;
				width: 70upx;
				height: 70upx;
				line-height: 70upx;
				font-size: 40upx;
				color: #fff;
				-webkit-border-radius: 50%;
				border-radius: 50%;
			}
		}
	}
	
	// 其他操作栏
	.other-box{
		margin-top: 10px;
		background-color: #fff;
		.item{
			height: 90upx;
			line-height: 90upx;
			> .iconfont{
				width: 105upx;
				font-size: 36upx;
				border-bottom: solid 1px #fbfbfb;
				text-align: center;
			}
			.icon-certification{ font-weight: bold;}
			.item-right{
				border-bottom: solid 1px #E2E2E2;
				.title{ font-size: 22upx;}
				.icon-right{ 
					width: 30px; 
					color: #ccc; 
					text-align: center;
				}
			}
		}
	}
}
</style>
